<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车牌号">
            <el-input v-model="searchForm.licenseNumber" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleAddCar">新增车辆</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column
        label="车牌号"
        prop="licensePlate"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column label="车牌颜色" prop="licensePlateColor" align="center" width="100">
        <template #default="{ row }">
          {{ handleFilterLiceseColor(row.licensePlateColor) }}
        </template>
      </el-table-column>
      <el-table-column
        label="车型"
        prop="vehicleModel"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column label="车辆类别" prop="carCategory" align="center" width="180">
        <template #default="{ row }">
          {{ handleFilterCarCategory(row.carCategory) }}
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" prop="carType" align="center" width="220">
        <template #default="{ row }">
          {{ handleFilterCarType(row.carType, row.carCategory) }}
        </template>
      </el-table-column>
      <el-table-column
        label="发动机型号"
        prop="engineType"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column label="底盘(车身)号" prop="vin" align="center" width="180"></el-table-column>
      <el-table-column
        label="业户名称"
        prop="companyName"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column label="车籍地" prop="carRegisterPlace" align="center" width="180">
      </el-table-column>
      <el-table-column label="营运状态" prop="businessStatus" align="center" width="180">
        <template #default="{ row }">
          {{ handleFilterBusiness(row.businessStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="上次年审时间"
        prop="status"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        label="上次二级维护时间"
        prop="status"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="240" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEditCar(row)">编辑</el-button>
          <el-button type="primary" @click="handleDetailCar(row)">完善</el-button>
          <el-button type="primary" @click="handleMaintain(row)">维护</el-button>
          <!-- <el-button type="primary">年审</el-button> -->
          <el-popconfirm title="确定要删除该车辆信息?" width="200" @confirm="handleDelete(row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 新增、编辑 -->
    <add-edit ref="addEditRef" @success="handleGetTableList"></add-edit>
    <!-- 完善信息 -->
    <complete-info ref="completeRef" @success="handleGetTableList"></complete-info>
    <!-- 维护记录 -->
    <second-maintain ref="maintainRef"></second-maintain>
  </el-card>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import { useInitTable } from "@/hooks/useCommon";
import { colorTypeList, carCategoryList, carStatusList } from "@/enum/index";
import { toast } from "@/utils/index";
import { getEnterpriseCarPageApi, deleteEnterpriseCarApi } from "@/api/second";

const AddEdit = defineAsyncComponent(() => import("./components/addEdit.vue"));
const CompleteInfo = defineAsyncComponent(() => import("./components/completeInfo.vue"));
const SecondMaintain = defineAsyncComponent(() => import("./components/secondMaintain.vue"));

// 表格
const { searchForm, tableData, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      licenseNumber: ""
    },
    getTableList: getEnterpriseCarPageApi
  });
const addEditRef = ref();
//新增
const handleAddCar = () => {
  addEditRef.value.handleCreate();
};
// 编辑
const handleEditCar = (row: any) => {
  addEditRef.value.handleEdit(row);
};
// 删除
const handleDelete = async (id: number) => {
  try {
    await deleteEnterpriseCarApi(id);
    toast("删除成功");
    handleGetTableList();
  } catch (error) {
    console.log(error);
  }
};
// 完善
const completeRef = ref();
const handleDetailCar = (row: any) => {
  completeRef.value.handleComplete(row.id, row.carCategory);
};
// 维护
const maintainRef = ref();
const handleMaintain = (row: any) => {
  maintainRef.value.handleOpen(row.id);
};
// 格式化颜色
const handleFilterLiceseColor = (val: string | number) => {
  const curItem = colorTypeList.find((item) => item.value === val);
  return curItem?.label;
};
// 格式化车辆类别
const handleFilterCarCategory = (val: string | number) => {
  const curItem = carCategoryList.find((item) => item.value === val);
  return curItem?.label;
};
// 格式化车辆类型
const handleFilterCarType = (type: number, category: number) => {
  const curItem = carCategoryList.find((item) => item.value === category);
  const newItem = curItem!.options;
  const curType = newItem.find((item: any) => item.value === type);
  return curType?.label;
};
// 格式化车辆营运状态
const handleFilterBusiness = (val: string | number) => {
  const curItem = carStatusList.find((item) => item.value === val);
  return curItem?.label;
};
</script>
<style scoped lang="scss"></style>
